<template>
  <div class="release">
    <!--标题-->
    <div class="release1">
      <img @click="returns()" src="../../../assets/2.svg"/>
      <h3></h3>
      <div>
        <span @click="returns1()"> 发布</span>
      </div>
    </div>
    <!--内容-->
    <div class="release2">
      <textarea
        v-model="title"
        maxlength="500"
        @input="monitorInput"
        name="text"
        placeholder="发送一些好的主题，可以吸引更多的异性给你发好感哟......"
      ></textarea>
      <span>{{ num }}/500</span>
      <div class="release2-div">
        <ul>
          <li
            v-for="(item, index) in showImgsrc"
            :key="index"
            class="release2-li"
          >
            <img :src="item" alt="" />
            <span class="release2-span" @click="clearImg(index)">X</span>
          </li>
          <div class="release2-div1">
          <li v-if="showImgsrc.length < 9" class="release2-li1">
            <input type="file" @change="uploadImg($event)" />
          </li>
          </div>
          <span class="release2-span1"
              >已上传（{{ showImgsrc.length }}/9）</span
            >
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'release2',
  data () {
    return {
      title: '',
      num: 500,
      showImgsrc: []
    }
  },
  methods: {
    monitorInput () {
      var txtval = this.title.length
      this.num = 500 - txtval
    },
    uploadImg (e) {
      const that = this
      const imgFiles = e.target.files
      console.log(e.target.files.length)
      if (e.target.files.length + that.showImgsrc.length >= 10) {
        this.showDialog = true
        this.contentText = '您最多只能上传9张图片，请重新上传！'
      } else {
        for (var i = 0; i < imgFiles.length; i++) {
          var fr = new FileReader()
          fr.onload = function () {
            that.showImgsrc.push(this.result)
          }
          fr.readAsDataURL(imgFiles[i]) // 读取文件
        }
      }
    },
    clearImg (index) {
      this.showImgsrc.splice(index, 1)
    },
    returns(){
      this.$router.push('/fashion')
    },
    returns1(){
      this.$toast({
        message: '已发布',
        duration: 1000
      })
    }
  }
}
</script>
<style>
/*标题*/
.release {
  text-align: center;
}
.release1 {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.release1 a {
  flex: 1;
  text-decoration: none;
}
.release1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.release1 h3 {
  flex: 6;
}
.release1 div span {
  flex: 1;
  line-height: 60px;
  color: #3b3b3b;
  font-size: 18px;
  margin-right: 20px;
}
/*内容*/
.release2 {
  width: 100%;
  height: 100%;
  background-color: #e0dfdf;
}
.release2 textarea {
  width: 100%;
  height: 30vh;
  box-sizing: border-box;
  background-color: #eeecec;
  border: none;
  padding: 10px;
  color: #000;
  font-size: 1.2rem;
}
.release2 span {
  box-sizing: border-box;
  float: right;
  margin-right: 10px;
}
/*添加图片*/
.release2-div {
  width: 100%;
  margin-top: 10px;
  overflow-y: scroll;
}
.release2-div ul {
  width: 100%;
  height: 30%;
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.release2-li {
  flex: 1;
  width: 80px;
  height: 80px;
  margin-top: 5px;
  position: relative;
}
.release2-li img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.release2-span {
  position: absolute;
  top: 0;
  right: 0;
  background: #df0615;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 30px;
}
.release2-div1 {
  width: 80px;
  height: 80px;
  background-image: url('../../../assets/1.svg');
  background-size: 80px 80px;
  background-repeat:no-repeat;
  border: 2px solid #fff;
  margin-top: 5px;
  margin-left: 10px;
}
.release2-li1 {
  opacity: 0;
}
.release2-li1 input {
  width: 80px;
  height: 80px;
}
.release2-span1 {
  line-height: 90px;
  font-size: 16px;
  color: red;
  margin-left: 10px;
}
</style>
